<template>
  <div>
    <swiper class="pk-swiper" 
      v-if="fileSpace" 
      :style="{'background':'url('+fileSpace+'/images/pk-baner.png)','backgroundSize': '100%'}" 
      :previous-margin="swiperData.previous" 
      :next-margin="swiperData.next" 
      :current="curIndex" 
      :display-multiple-items="swiperData.num" 
      :circular='true' @change="change">
      <swiper-item class="swiper-item" :class="{active: curIndex===index}" v-for="(item, index) in liveList" :key="index" @click="swiperClick(index)">
        <div class="item-box" :class="{opacity: curIndex !== index}">
          <img class="bg-img" :class="{'main-img': curIndex===index}" mode="aspectFill" v-if="item.type===1 && fileSpace" :src="fileSpace + '/images/comprehensive.png'" alt="">
          <img class="bg-img" :class="{'main-img': curIndex===index}" mode="aspectFill" v-if="item.cover_img" :src="item.cover_img" alt="">
          <div class="active-box" :style="{background: 'url('+fileSpace+'/images/pk-item-bg.png)',backgroundSize: '100%'}" v-if="curIndex===index">
            <template v-if="item.type !== 1">
              <div class="live-status" v-if="item.live_status === 101">直播中</div>
              <div class="live-status" v-else-if="item.live_status === 102">预直播</div>
              <div class="live-status" v-else>回放</div>
            </template>
            <div v-if="item.type!==1">
              <div class="font-14 font-w pad-l-17 line-h-1 pad-t-7">{{item.name}}</div>
              <div class="font-12 font-color-9 pad-l-17 line-h-1 pad-t-6">主播：{{item.anchor_name}}</div>
              <button class="mar-t-6" @click="share(item)">分享</button>
            </div>
            <div class="comprehensive" v-else>
              <button @click="showRuleDialog = true" >规则说明</button>
            </div>
          </div>
          <template v-else>
            <template v-if="item.type !== 1">
              <div class="live-status" v-if="item.live_status === 101">直播中</div>
              <div class="live-status" v-else-if="item.live_status === 102">预直播</div>
              <div class="live-status" v-else>回放</div>
            </template>
            <div class="main-box">
              <div v-if="item.type!==1">
                <div class="font-white font-14 font-w pad-l-17 line-h-1">{{item.name}}</div>
                <div class="font-white font-12 pad-t-6 pad-l-17 line-h-1">主播：{{item.anchor_name}}</div>
                <button class="mar-t-6">分享</button>
              </div>
              <div class="comprehensive" v-else>
                <button>规则说明</button>
              </div>
            </div>
            <div class="mask-box"></div>
          </template>
        </div>
      </swiper-item>
    </swiper>
    <div class="table-wrap">
      <van-sticky>
        <div class="table-head flex flex-between pad-l-15 pad-r-15">
          <div class="flex flex-center font-13">
            <div>排名</div>
            <div class="mar-l-16">店主</div>
          </div>
          <div class="flex flex-between width-180 font-12">
            <div class="text-align-l width-50">合计</div>
            <div class="text-align-l width-50">直接</div>
            <div class="text-align-l width-50">海报</div>
          </div>
          <!-- <div class="flex flex-between font-12">
            <div class="flex flex-center mar-r-17" @click="setSort(0)">
              <span :class="sortIndex===1?'tab-on':'tab-off'">合计</span>
              <div class="mar-l-4">
                <img v-if="fileSpace && sortList.total===''" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow3.png'"/>
                <img v-if="fileSpace && sortList.total===1" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow1.png'"/>
                <img v-if="fileSpace && sortList.total===0" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow2.png'"/>
              </div>
            </div>
            <div class="flex flex-center mar-r-17" @click="setSort(1)">
              <span :class="sortIndex===1?'tab-on':'tab-off'">直接</span>
              <div class="mar-l-4">
                <img v-if="fileSpace && sortList.direct===''" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow3.png'"/>
                <img v-if="fileSpace && sortList.direct===1" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow1.png'"/>
                <img v-if="fileSpace && sortList.direct===0" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow2.png'"/>
              </div>
            </div>
            <div class="flex flex-center" @click="setSort(2)">
              <span :class="sortIndex===1?'tab-on':'tab-off'">海报</span>
              <div class="mar-l-4">
                <img v-if="fileSpace && sortList.poster===''" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow3.png'"/>
                <img v-if="fileSpace && sortList.poster===1" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow1.png'"/>
                <img v-if="fileSpace && sortList.poster===0" mode="widthFix" class="width-9 height-12"
                  :src="fileSpace + '/images/goods-arrow2.png'"/>
              </div>
            </div>
          </div> -->
        </div>
      </van-sticky>
      <div class="pad-l-15 pad-r-15">
        <div class="nodata align-c" v-show="nodata">
          <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-274 height-65" alt="">
          <div class="mar-t-20 font-16 font-color-6">
            暂无数据~
          </div>
        </div>
        <div class="flex flex-between ranking-item" v-for="(item, index) in rankingList" :key="index">
          <div class="flex flex-center font-13">
            <div class="pk-sort">
              <img v-if="fileSpace && item.excelNo <= 3" :src="fileSpace + '/images/pk-sort.png'" alt="">
              <div class="ranking" :class="{'top-ranking': item.excelNo <= 3}">{{item.excelNo}}</div>
            </div>
            <div class="mar-l-16 flex flex-between">
              <img class="width-36 height-36 shopHead" v-if="item.avatar" :src="item.avatar" alt="">
              <div class="mar-l-11 width-60 line-1">{{item.nickname}}</div>
            </div>
          </div>
          <div class="flex flex-between width-180 font-15">
            <div class="width-50 text-align-l font-w">{{item.countNum}}</div>
            <div class="width-50 text-align-l font-color-6">{{item.liveShareNum}}</div>
            <div class="width-50 text-align-l font-color-6">{{item.posterShareNum}}</div>
          </div>
        </div>
        <!-- <div v-if="pullLoad.finished && !nodata" class="mar-l--15">
          <base-line title='我是有底线滴'></base-line>
        </div> -->
      </div>
      <div>
        <div class="flex flex-between ranking-item fixed-b">
          <div class="flex flex-center font-13">
            <div class="pk-sort">
              <div class="ranking" :class="{'top-ranking': selfRakeData.excelNo < 3}">{{selfRakeData.excelNo}}</div>
            </div>
            <div class="mar-l-16 flex flex-between">
              <img class="width-36 height-36 shopHead" v-if="selfRakeData.avatar" :src="selfRakeData.avatar" alt="">
              <div class="mar-l-11">{{selfRakeData.nickname}}</div>
            </div>
          </div>
          <div class="flex flex-between width-180 font-15">
            <div class="width-50 text-align-l font-w">{{selfRakeData.countNum}}</div>
            <div class="width-50 text-align-l font-color-6">{{selfRakeData.liveShareNum}}</div>
            <div class="width-50 text-align-l font-color-6">{{selfRakeData.posterShareNum}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="go-top" v-if="fileSpace && showGoTop" :style="{backgroundImage:'url('+ fileSpace +'/images/go-top.png)'}" catchtouchmove="true" @click="toTop"></div>
    <div>
      <div class="div-pop" catchtouchmove="true" v-show="showRuleDialog">
        <div class="dialog" :style="{backgroundImage: 'url('+fileSpace+'/images/rule-bg.png)'}">
          <div class="title-bar">规则说明</div>
          <div class="content pad-l-15 pad-r-15">
            <div class="flex mar-t-20">
              <label>1、</label>
              <p class="flex-item"><label>参与用户：</label>小程序内所有店主。</p>
            </div>
            <div class="flex mar-t-15">
              <label>2、</label>
              <p class="flex-item"><label>综合排名：</label>通过直接分享好友和海报分享进入直播间的合计观众数进行排名。</p>
            </div>
            <div class="flex mar-t-15">
              <label>3、</label>
              <p class="flex-item"><label>直播间推广排名：</label>通过直接分享好友和海报分享进入PK榜选中直播间的合计观众数进行排名。</p>
            </div>
          </div>
          <button @click="showRuleDialog = false">朕知道了</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getWechatLiveBroadcast } from '@/api/home'
import baseLine from '@/components/BaseLine/index'
import { pagingRaking, getRakingByMemberId } from '@/api/personal'
export default {
  components: { baseLine },
  data() {
    return {
      curIndex: 0,
      sortIndex: 0,
      sortList: {
        total: '',
        direct: '',
        poster: ''
      },
      liveParams: {
        memberId: '',
        liveStatus: '',
        currentPage: 0,
        size: 10
      },
      showRuleDialog: false,
      currentPage: 0,
      liveList: [],
      liveFinish: false,
      timer: null,
      rankingParams: {
        memberId: '',
        roomId: '',
        size: 10,
        currentPage: 1
      },
      rankingList: [],
      pullLoad: {
        loading: false,
        finished: false
      },
      selfRakeData: {},
      nodata: false,
      showGoTop: false,
      swiperData: {
        previous: '12px',
        next: '16px',
        num: 2
      },
      swiperIsChnage: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.liveParams.memberId = this.getMemberId
    this.rankingParams.memberId = this.getMemberId
    this.rankingParams.currentPage = 1
    this.liveParams.currentPage = 0
    this.getWechatLiveBroadcast()
    setTimeout(() => {
      this.pagingRaking()
      this.getRakingByMemberId()
    }, 1000)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pagingRaking()
      this.getRakingByMemberId()
    }
  },
  onPageScroll(e) {
    if (e.scrollTop >= 260) {
      this.showGoTop = true
    } else {
      this.showGoTop = false
    }
  },
  methods: {
    getWechatLiveBroadcast() {
      getWechatLiveBroadcast(this.liveParams).then(response => {
        if (response.isError) return
        let records = response.data.records
        records.forEach(item => {
          this.liveList.push(item)
        })
        if (this.liveList.findIndex(val => val.type === 1) === -1) {
          this.liveList.unshift({
            type: 1,
            lastUpdateTime: new Date().toLocaleString()
          })
        }
        this.liveParams.currentPage += 1
        if (this.liveList.length === 1 || this.liveList.length === (response.data.total + 1)) {
          this.liveFinish = true
        }
      }).catch(() => {
      })
    },
    getRakingByMemberId() {
      let roomid = ''
      if (this.liveList[this.curIndex]) {
        roomid = this.liveList[this.curIndex].roomid
      }
      let params = {
        memberId: this.getMemberId,
        roomId: roomid
      }
      getRakingByMemberId(params).then(response => {
        if (response.isError) return
        let resData = response.data
        if (!resData.excelNo) {
          let obj = {
            countNum: 0,
            liveShareNum: 0,
            posterShareNum: 0,
            excelNo: '-'
          }
          this.selfRakeData = Object.assign({}, resData, obj)
          return
        }
        resData.countNum = this.$utils.trsCount(resData.countNum)
        resData.liveShareNum = this.$utils.trsCount(resData.liveShareNum)
        resData.posterShareNum = this.$utils.trsCount(resData.posterShareNum)
        this.selfRakeData = resData
      }).catch(() => {
      })
    },
    change(e) {
      this.curIndex = e.mp.detail.current
      if (this.curIndex !== 0 && !this.swiperIsChnage) {
        this.swiperData.previous = '110px'
        this.swiperData.next = '90px'
        this.swiperData.num = 1
        this.swiperIsChnage = true
      }
      // 判断直播列表是否全部加载完毕
      if (this.curIndex === (this.liveList.length - 1) && !this.liveFinish) {
        this.getWechatLiveBroadcast()
      }
      clearTimeout(this.timer)
      this.timer = null
      this.timer = setTimeout(() => {
        this.rankingList = []
        this.pullLoad.finished = false
        this.rankingParams.currentPage = 1
        this.pagingRaking()
        this.getRakingByMemberId()
      }, 1000)
    },
    swiperClick(index) {
      this.curIndex = index
    },
    pagingRaking() {
      let roomid = ''
      if (this.liveList[this.curIndex]) {
        roomid = this.liveList[this.curIndex].roomid
      }
      this.rankingParams.roomId = roomid
      this.nodata = false
      pagingRaking(this.rankingParams).then(response => {
        if (response.isError) return
        let records = response.data.records
        records.forEach(item => {
          item.countNum = this.$utils.trsCount(item.countNum)
          item.liveShareNum = this.$utils.trsCount(item.liveShareNum)
          item.posterShareNum = this.$utils.trsCount(item.posterShareNum)
          this.rankingList.push(item)
        })
        if (this.rankingList.length === 0) {
          this.nodata = true
        }
        this.rankingParams.currentPage++
        if (this.rankingList.length === 0 || this.rankingList.length === response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    share(item) {
      this.$pt.navigateTo({url: '/pages/home/live-share/main?roomid=' + item.roomid + '&live_status=' + item.live_status})
    },
    setSort(value) {
      this.sortIndex = value
      switch (this.sortIndex) {
        case 0:
          this.sortList.total = this.sortList.total ? 0 : 1
          this.sortList.direct = ''
          this.sortList.poster = ''
          // this.resetPageParams()
          break
        case 1:
          this.sortList.direct = this.sortList.direct ? 0 : 1
          this.sortList.total = ''
          this.sortList.poster = ''
          // this.resetPageParams()
          break
        case 2:
          this.sortList.total = ''
          this.sortList.direct = ''
          this.sortList.poster = this.sortList.poster ? 0 : 1
          // this.resetPageParams()
          break
        default:
          break
      }
    },
    toTop() {
      this.$pt.pageScrollTo({
        scrollTop: 0
      })
    }
  }
}
</script>
<style lang="less" scoped>
.pk-swiper{
  height: 294px;
  padding-top: 12px;
  box-sizing: border-box;
  background-size: 100%;
  .line-h-1{
    line-height: 1;
  }
  .swiper-item{
    .opacity{
      opacity: 0.95;
    }
    .item-box{
      width: 160px;
      height: 222px;
      background-color: white;
      border-radius: 7.5px;
      position: relative;
      overflow: hidden;
      .bg-img{
        width: 155px;
        height: 165.5px;
        margin: 2.5px 2.5px 0;
        border-radius: 5px 5px 0 0;
      }
      .main-img{
        width: 155px;
        height: 140px;
      }
      button{
        height: 32px;
        line-height: 32px;
        border-radius: 16px;
        width: 104px;
        font-size: 12px;
        &::after{
          border: unset;
        }
      }
      .active-box{
        height: 86px;
        button{
          background-color: #5B3CD0;
          color: white;
          font-weight: bold;
        }
      }
      .live-status{
        height: 16px;
        line-height: 16px;
        background: #FFE400;
        border-radius: 8px;
        font-weight: bold;
        font-size: 11px;
        color: #000000;
        position: absolute;
        left: 8.5px;
        top: 8.5px;
        padding: 0 11px;
      }
      .main-box{
        position: absolute;
        left: 0;
        top: 140px;
        width: 100%;
        z-index: 2;
        button{
          background-color: #552da8;
          color: #ffe400;
        }
      }
      .mask-box{
        position: absolute;
        z-index: 1;
        left: 0;
        width: 100%;
        bottom: 0;
        height: 129px;
        border-radius: 7.5px 7.5px 0 0;
        background: linear-gradient(to top, #6b3ad2, rgba(107, 58, 210, 0));
      }
    }
  }
  .active{
    .item-box{
      width: 160px;
      height: 228px;
    }
  }
}
.table-wrap{
  background: white;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  margin-top: -34px;
  min-height: calc(100vh - 260px);
  padding-bottom: 54px;
  box-sizing: border-box;
  .table-head{
    height: 45px;
    background: white;
    border-bottom: 0.5px solid #EEEEEE;
  }
  .ranking-item{
    height: 70px;
    box-sizing: border-box;
    border-bottom: 0.5px solid #EEEEEE;
    &:last-child{
      border-bottom: unset;
    }
    // &:nth-last-child(2){
    //   border-bottom: unset;
    // }
    .pk-sort{
      width: 24.5px;
      height: 18px;
      position: relative;
      img{
        width: 24.5px;
        height: 18px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .ranking{
        position: absolute;
        left: 0;
        top: 0;
        width: 24.5px;
        height: 18px;
        text-align: center;
        color: #343434;
        font-size: 12px;
        padding-top: 2px;
      }
      .top-ranking{
        color: #C65519;
        font-weight: bold;
      }
    }
    .shopHead{
      border-radius: 50%;
    }
  }
  .fixed-b{
    height: 54px;
    border-bottom: unset;
    padding: 0 15px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 1px 6.5px rgba(156, 156, 156, 0.33);
  }
}
.dialog{
  width: 274px;
  height: 364px;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
  margin-top: -70px;
  position: relative;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100%;
  .title-bar{
    height: 39px;
    line-height: 39px;
    text-align: center;
    background-color: #EFEFEF;
    font-size: 15px;
    color: #343434;
    font-weight: bold;
  }
  .content{
    font-size: 13px;
    color: #343434;
    label{
      font-weight: bold;
    }
    p{
      line-height: 20px;
    }
  }
  button{
    position: absolute;
    bottom: 12px;
    left: calc(50% - 84px);
    height: 45px;
    line-height: 45px;
    width: 168px;
    background-color: #FEDC16;
    border-radius: 22.5px;
    font-size: 16px;
    color: #343434;
    text-align: center;
    font-weight: bold;
    &::after{
      border: unset;
    }
  }
}
.comprehensive{
  padding-top: 35px;
}
.line-1{
  height: unset;
  line-height: unset;
}
.nodata{
  padding-top: 65px;
}
.go-top{
  width: 50px;
  height: 50px;
  background-size: 100%;
  position: fixed;
  bottom: 60px;
  right: 22px;
}
</style>
